<template>
  <div class="table-page">
    <div v-if="$slots.buttonGroup" class="table-page-btn-group">
      <slot name="buttonGroup"></slot>
    </div>
    <div class="table-page-content">
      <slot></slot>
    </div>
    <div class="footer">
      <template v-if="hasPaper">
        <el-pagination
          background
          :total="total"
          :page-size="pageSize"
          :current-page="pageNum"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="prev, pager, next, jumper"
        ></el-pagination>
      </template>
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex"
export default {
  name: "TablePage",
  props: {
    pageCurrent: {
      type: [Number, String],
      default: 1
    },
    pageSizeNum: {
      type: [Number, String],
      default: 10
    },
    total: {
      type: [Number, String],
      default: 0
    },
    hasPaper: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      pageNum: this.pageCurrent,
      pageSize: this.pageSizeNum
    }
  },
  computed: { ...mapState(["locale"]) },
  async mounted() {
    let pageText = document.getElementsByClassName("el-pagination__jump")[0]
    if (pageText && this.locale == "en-US") {
      pageText.childNodes[0].nodeValue = "Go"
      pageText.childNodes[2].nodeValue = "Page"
    }
  },
  methods: {
    reset() {
      this.pageNum = 1
      this.$emit("page-change", this.pageNum, this.pageSize)
    },
    reload() {
      this.pageNum = this.pageCurrent
      this.pageSize = this.pageSizeNum
      this.$emit("page-change", this.pageNum, this.pageSize)
    },
    refresh() {
      this.$emit("page-change", this.pageNum, this.pageSize)
    },
    handleSizeChange(val) {
      this.pageNum = 1
      this.pageSize = val
      this.$emit("page-change", this.pageNum, this.pageSize)
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.$emit("page-change", this.pageNum, this.pageSize)
    }
  }
}
</script>

<style lang="scss" scoped>
.table-page,
.table-page-content {
  width: 100%;
  background: #fff;
}
.table-page-btn-group {
  padding-bottom: 16px;
  padding: 20px;
  background: #fff;
  .operation {
    margin-bottom: 20px;
  }
}
.footer {
  padding: 40px 0;
  text-align: center;
}
</style>
